<template>
	<view class="container">
		<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
			back-icon-size="35" :background="{ background: '#101334' }" title="修改密码" title-color="aliceblue">
		</u-navbar>
		<view class="form">
			<u-form :model="form" ref="uForm" :errorType="errorType">
				<view class="test">
					<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="kefu-ermai"
						:label-position="labelPosition" label="手机号码" prop="phone" label-width="150" :label-style="labelStyle">
						<u-input :border="border" placeholder="请输入手机号" v-model="form.phone" type="number" ></u-input>
					</u-form-item>
					<u-form-item :label-position="labelPosition" label="验证码" prop="code" label-width="150" :label-style="labelStyle">
						<u-input :border="border" placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
						<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
					</u-form-item>
					<u-form-item label="新密码" label-width="130rpx" :label-style="labelStyle">
						<u-input type="password" placeholder="请输入新密码" password-icon
							 />
					</u-form-item>
					<u-form-item label="确认密码" label-width="130rpx" :label-style="labelStyle">
						<u-input type="password" placeholder="请再次输入新密码" password-icon
							 />
					</u-form-item>
					<view class="info"> 密码必须为6-18位字符,包含数字、字母</view>
				</view>
			</u-form>
			<u-button type="warning" :ripple="true" :custom-style="customStyle" @click="submit">确认</u-button>
      <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					phone: '',
					code: ''
				},
				customStyle: {
					marginTop: "200rpx", // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: "#c09358",
				},
				inputStyle: {
					color: "aliceblue",
					display: 'inline-flex',
					width: '200rpx'
				},
        labelPosition: 'left',
			  codeTips: '',
        border: false,
        errorType: ['message'],
        // form 样式
				labelStyle: {
					width:"180rpx",
					marginRight:"30rpx",
					color: "aliceblue",
				},
			};
		},
		methods: {
			// 获取验证码
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
      codeChange(text) {
        this.codeTips = text;
      },
			submit(e) {
				console.log("submit", e);
        this.$refs.uForm.validate(valid => {
          if (valid) {
            console.log('验证通过');
          } else {
            console.log('验证失败');
          }
        });
      },
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		color: aliceblue;
		min-height: 100vh;
		background-color: #101334;

		.form {
			padding: 30rpx;

			// display:inline-flex
			//display: inline-block;
			.test {
				// display:inline-flex
			}

			.info {
				margin-top: 10rpx;
				color: #696c89;
				font-size: 24rpx;
			}
		}
	}
</style>
